<script setup lang="ts">
const router = useRouter()
const routes = router.getRoutes()

const navActive = ref(false)

let timer: number | null = null
let timerRunning = false // 定时器是否正在运行的标志变量
const delay = 3000 // 长按时间阈值,单位毫秒

function startPress(event: KeyboardEvent | MouseEvent | TouchEvent) {
  // 2 表示右键，不是鼠标右键不触发
  // if (event instanceof MouseEvent && event.button !== 2)
  //   return

  if (event instanceof KeyboardEvent && event.key !== 'n' && event.key !== 'N')
    return

  if (!timerRunning) { // 只有当定时器未运行时,才启动新的定时器
    timerRunning = true
    timer = window.setTimeout(() => {
      navActive.value = !navActive.value
      timerRunning = false // 定时器执行完毕,重置标志变量
    }, delay)
  }
}

function endPress() {
  if (timerRunning) { // 只有当定时器正在运行时,才清除定时器并重置标志变量
    clearTimeout(timer!)
    timer = null
    timerRunning = false
  }
}

onMounted(() => {
  // TODO 监听鼠标右键长按
  // document.addEventListener('mousedown', startPress)
  // document.addEventListener('mouseup', endPress)
  // document.addEventListener('mouseleave', endPress)
  // document.addEventListener('contextmenu', (event) => {
  //   event.preventDefault() // 阻止默认的右键菜单
  // })

  // TODO 监听键盘长按
  document.addEventListener('keydown', startPress)
  document.addEventListener('keyup', endPress)

  // TODO 监听触摸长按
  document.addEventListener('touchstart', startPress)
  document.addEventListener('touchend', endPress)
})

onUnmounted(() => {
  // document.removeEventListener('mousedown', startPress)
  // document.removeEventListener('mouseup', endPress)
  // document.removeEventListener('mouseleave', endPress)
  document.removeEventListener('keydown', startPress)
  document.removeEventListener('keyup', endPress)
  document.removeEventListener('touchstart', startPress)
  document.removeEventListener('touchend', endPress)
})

const height = ref('1%')
</script>

<template>
  <RouterView />

  <van-floating-panel v-if="navActive" v-model:height="height" @click.stop.self @touchstart.stop.self
    @touchmove.stop.self @touchend.stop.self @mousedown.stop.self @mouseup.stop.self @mousemove.stop.self>
    <van-watermark content="Design By 刘仁钦" rotate="8" :gap-x="30" :gap-y="10" />
    <ul class="pl-20">
      <li v-for="route in routes" :key="route.path" class="name mb-8">
        <router-link class="tracking-2px !text-black" :to="route.path" @click="navActive = false">
          {{ route.name }}
        </router-link>
      </li>
    </ul>
  </van-floating-panel>
</template>

<style lang="scss" scoped>
/*
https://sass-lang.com/documentation/at-rules/import/

The Sass team discourages the continued use of the @import rule. 
Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead. 
(Note that only Dart Sass currently supports @use. Users of other implementations must use the @import rule instead.)
*/
// @import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');

// Vite 目前可能无法直接处理 @use URL 形式的 CSS 资源引入
// ❌ @use 'https://fonts.googleapis.com/css2?family=Righteous&display=swap';

@use './assets/fonts/Righteous.css';

.name {
  font-family: "Righteous", sans-serif;
  font-size: clamp(14px, 2vw, 60px);
}

.router-link-active {
  color: rgba(65, 186, 131, 1) !important;
} 
</style>
